import React,{Component, useEffect, useState} from "react";
import { Flex, Layout } from 'antd';
import { Button } from 'antd';

import { Card, Space } from 'antd';
import axios from "axios";
import { useNavigate } from "react-router-dom";


const { Header, Footer, Sider, Content } = Layout;

const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 60,
    paddingInline: 48,
 
    backgroundColor: '#24bfe4',
  };
  const contentStyle = {
    height:'100px',
 
  
    color: '#fff',
    // backgroundColor: '#0958d9',
  };
  const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#1677ff',
  };
  const footerStyle = {
  
    color: '#fff',
    // backgroundColor: '#4096ff',
    height:'1500px'
  };
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '',
  
 
  };


export default function Gwc(){
    const [zsl,steZsl]=useState(0)

    const [data,getData] = useState([])

    const getlist=async()=>{
        await axios.get(`http://localhost:3001/type`).then(res=>{
            if(res.status==200){
                getData(res.data)
               
                
              
            }
        })
    }
    
    useEffect(()=>{
        getlist()
    },[])

    const navigator=useNavigate()

    const sy=()=>{
        navigator('/')
    }

    const jia=async(item)=>{
        const shu=item.sl+1
       
        const res=await axios.patch(`http://localhost:3001/type/${item.id}`,{
            sl:shu
        })
       if(res.status==200){
        getlist()
       }
        
    }
    const jian=async(item)=>{
        const shu=item.sl-1
       
        const res=await axios.patch(`http://localhost:3001/type/${item.id}`,{
            sl:shu
        })
       if(res.status==200){
        getlist()
       }
        
    }


return(
    <div>

    <div>
    <Layout style={layoutStyle}>
        <Header style={headerStyle}>
        <Button type="primary" style={{backgroundColor:'rgb(196 252 255)',color:'black'}} onClick={()=>sy()}>首页</Button>
        <Button type="primary" style={{backgroundColor:'rgb(196 252 255)',color:'black'}} >购物车</Button>
       
 
        
        </Header>
        <Content style={contentStyle}>
            {/* <div>
                <p>总数量：{zsl}</p>
                <p>总价格：</p>
            </div> */}
        </Content>
        <Footer style={footerStyle}>

            <div>

                <div style={{}}>

                    {
                        data.map(item=>{
                            return(
                                <div key={item.id} style={{width:'90%',paddingLeft:'90px',marginTop:'20px'}}>
                                    <Card  >
                                        <div style={{display:'flex'}} >
                                        <p><img src="https://img2.baidu.com/it/u=3238494404,2162289475&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500" style={{width:'190px'}}></img></p>
                                            <p style={{fontWeight:'bolder',fontSize:'20px',marginLeft:'200px'}}>名称：{item.name}</p>
                                            <p style={{fontWeight:'bolder',fontSize:'20px',marginLeft:'200px'}}>数量：
                                            <Button onClick={()=>jian(item)}>-</Button>
                                                {item.sl}
                                                <Button  onClick={()=>jia(item)}>+</Button></p>

                                            <p style={{fontWeight:'bolder',fontSize:'20px',marginLeft:'200px'}}>价格：{item.price*item.sl}元</p>
                                        </div>
                             
                                </Card>

                                </div>
                                
                            )
                        })
                    }
               
                </div>

            </div>
        </Footer>
        </Layout>
    </div>




    </div>
)
}
